<template>
  <div  @click="closeLogin" :class="real_them">
    <!-- 头部 -->
    <header class="header">快捷工具</header>
    <!-- 图标 -->
    <ul class="tool-list">
      <li class="item">
        <div class="tip_time" v-if="tipnum == 1">计算当前时间</div>
        <button class="btn btn-open" @click="Rtime" @mouseover="tip_time" @mouseleave="tipNone">
          <i class="el-icon-time"></i>
          <span class="title">处理时间</span>
        </button>
      </li>
      <li class="item">
        <div class="tip_quick" v-if="tipnum == 2">数组快速排序</div>
        <button class="btn btn-open" @click="quickSort" @mouseover="tip_quick" @mouseleave="tipNone">
          <i class="el-icon-d-arrow-right"></i>
          <span class="title">快速排序</span>
        </button>
      </li>
      <li class="item">
        <div class="tip_interval" v-if="tipnum == 3">settimeout模拟settimeinterval</div>
        <button class="btn btn-open" @click="intervals" @mouseover="tip_interval" @mouseleave="tipNone">
          <i class="el-icon-timer"></i>
          <span class="title">模拟延时</span>
        </button>
      </li>
      <li class="item">
        <div class="tip_PromiseAll" v-if="tipnum == 4">手写Promise.all</div>
        <button class="btn btn-open" @click="PromiseAll" @mouseover="tip_PromiseAll" @mouseleave="tipNone">
          <i class="el-icon-collection-tag"></i>
          <span class="title">Promise.all</span>
        </button>
      </li>
    </ul>

    <!-- 实时时间 -->
    <div class="Rtime_div" v-if="page == 1">
      <div class="code">
        代码展示：
      <pre>
    const time = (x) => {
      let date = new Date(x);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let mini = date.getMinutes();
      return ${year}-${month}-${day} ${hour}:${
        (mini + "").length == 1 ? "0" + mini : mini
          }`;
      };
    time(new Date())
      </pre>
      </div>
      <div class="run">
        <el-button class="trun_btn" size="small" type="primary" @click="Rtime_run">运行</el-button>
        <el-input class="Output" placeholder="运行结果" v-model="outPut_time" clearable></el-input>
      </div>
    </div>

    <!-- 快排div -->
    <div class="quickSort_div" v-if="page == 2">
      <div class="code">
        代码展示：
      <pre>
   const quickSort1 = arr => {
      if (arr.length &#60; = 1) {return arr;}
      let midIndex = Math.floor(arr.length/2);
      const valArr = arr.splice(midIndex, 1);
      const midIndexVal = valArr[0];
      const left = []; 
      const right = []; 
      for (let i = 0;i &#60; arr.length;i++) {
        if (arr[i] &#60; midIndexVal) {
           left.push(arr[i]); 
        } else {
           right.push(arr[i]); }
        }
      return 
      quickSort1(left).concat(midIndexVal, 
      quickSort1(right));
    };  
      </pre>
      </div>
      <div class="arr_div">
        <el-input class="arr_input" placeholder="请输入数组内容例:2 5 6..." v-model="arr_input" clearable></el-input>
        <!-- 输入提示 -->
        <div class="input_tip">{{ tips }}</div>
        <div class="run">
          <el-button class="run_btn" size="small" type="primary" @click="quickSort_run">运行</el-button>
          <el-input class="Output" placeholder="运行结果" v-model="outPut_arr" clearable></el-input>
        </div>
      </div>
    </div>
    <!-- 模拟延时函数 -->
    <div class="interval_div" v-if="page == 3">
      <div class="code">
        代码展示：
      <pre>
    let index = 0
    function interval(fn){
      let timeout = (fn) => {
        setTimeout(()=>{
          fn()
            timeout(fn)
            },1000)
          }
        timeout(fn)
      }
    interval(()=>console.log(++index))
      </pre>
      </div>
      <div class="run">
        <el-button class="trun_btn" size="small" type="primary" @click="interval_run">运行</el-button>
        <el-input class="Output" disabled  placeholder="运行结果" v-model="outPut" clearable></el-input>
        <el-button class="trun_btn" size="small" type="primary" @click="interval_stop">停止计时</el-button>

      </div>
    </div>

    <!-- 手写Promise.all -->
    <div class="Promise_div" v-if="page == 4">
      <div class="code">
        代码展示：
      <pre>
  Promise.MyAll = function (promises) {
    let ans = []
      return new Promise((resolve, reject) => {
        promises.forEach((item) => {
          Promise.resolve(item).then(
            res => {
              ans.push(res)
              if (ans.length == promises.length) {
                resolve(ans)
                }
              },
              reject
          )
        })
      })
  }
      </pre>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "Blog_js",
  data() {
    return {
      checked: false,
      a: 0,
      tipnum: 0,
      page: 1,
      outPut_arr: "",
      outPut_time: "",
      outPut: "",
      arr_input: '',
      tips: '',
      timeout: "",
      }
  },
  methods: {
    // 点击事件
    Rtime() {
      this.timeout = null
        this.page = 1;
        this.outPut_time= ""
    },
    quickSort() {
      this.timeout = null
        this.page = 2;
      this.outPut_arr = ""
    },
    intervals() {
        this.page = 3;
      this.outPut = ""
    },
    PromiseAll() {
      this.timeout = null
      this.page = 4;
    },
    // 鼠标移入事件
    tip_time() {
      this.tipnum = 1
    },
    tip_quick() {
      this.tipnum = 2
    },
    tip_interval() {
      this.tipnum = 3
    },
    tip_PromiseAll() {
      this.tipnum = 4
    },
    tipNone() {
      this.tipnum = 0
    },
    closeLogin(){
      this.$store.commit("changeshow", false)
    },
    // 实时时间
    Rtime_run() {
      const time = (x) => {
        let date = new Date(x);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let mini = date.getMinutes();
        return `${year}-${month}-${day} ${hour}:${(mini + "").length == 1 ? "0" + mini : mini
          }`;
      };
      this.outPut_time= time(new Date())
    },
    // 快排运行
    quickSort_run() {
      if (this.arr_input === "") {
        this.tips = '请输入数据'
        setTimeout(() => {
          this.tips = ''
        }, 3000);
        return
      } else {
        var arrs = this.arr_input.split(" ")
        arrs = arrs.filter((item) => {
            if(item != "" && (!isNaN(Number(item)))){
                return item
            }
        })
        for(let i = 0 ; i < arrs.length ; i++){
          arrs[i] -= 0
        }
        const quickSort1 = arr => {
          if (arr.length <= 1) {
            return arr;
          }
          //取基准点
          const midIndex = Math.floor(arr.length / 2);
          //取基准点的值，splice(index,1) 则返回的是含有被删除的元素的数组。
          const valArr = arr.splice(midIndex, 1);
          const midIndexVal = valArr[0];
          const left = []; //存放比基准点小的数组
          const right = []; //存放比基准点大的数组
          //遍历数组，进行判断分配
          for (let i = 0; i < arr.length; i++) {
            if (arr[i] < midIndexVal) {
              left.push(arr[i]); //比基准点小的放在左边数组
            } else {
              right.push(arr[i]); //比基准点大的放在右边数组
            }
          }
          //递归执行以上操作，对左右两个数组进行操作，直到数组长度为 <= 1
          return quickSort1(left).concat(midIndexVal, quickSort1(right));
        };
        this.outPut_arr = quickSort1(arrs).toString()
        return this.outPut_arr
      }
    },
    // 延时函数
    interval_run() {
      this.checked = !this.checked
      let index = 0
      let that = this
      function interval(fn) {
        that.timeout = (fn) => {
          setTimeout(() => {
            fn()
            try {
              that.timeout(fn)
            } catch (err) {
              that.a = 1
            }
          }, 1000)
        }
        try {
          that.timeout(fn)
        } catch (err) {
          that.a = 1
        }
      }
      interval(() => that.outPut = (++index));
    },
    // 停止计时器
    interval_stop() {
      this.timeout = null
    }
  },
  computed: {
    real_them() {
      let k = this.$store.state.skin
      let m =k == true ? "light" : "dark"
      return this.them + " " + m;
    },
  },
}
</script>

<style lang="less" scoped>
@import "../main.less";
.light {
  background-color: @bg_gray;
  transition: all 1s;

    i {
      color: @fs_light_blue;
      transition: all 1s;
    }

    .btn .title {
      color: @fs_light_blue;
      transition: all 1s;
    }

    .trun_btn {
     
      transition: all 1s;
    }

    .run_btn {
      transition: all 1s;
    }

    .arr_input{
     transition: all 1s;
    }

    /deep/.el-input__inner{
      transition: all 1s;
    }

}


.dark {
  background-color: @bg_dark;
  transition: all 1s;

   i {
      color: @fs_dark_smcontain;
      transition: all 1s;
    }
    .btn .title {
      color:@fs_dark_smcontain;
      transition: all 1s;
    }
    .trun_btn {
      background-color: @bt_deep_dark;
      transition: all 1s;
    }

    .run_btn {
      background-color: @bt_deep_dark;
      transition: all 1s;
    }

    .arr_input{
      background-color: #1C1C1C;
      transition: all 1s;
    }

    /deep/.el-input__inner{
      background-color: #1C1C1C;
      transition: all 1s;
      color: @fs_dark_smcontain;
    
    }
}



.header {
  box-sizing: border-box;
  padding: 0 1rem;
  min-height: 3.6666666667rem;
  color: @fs_light_smcontain;
  font-size: 1.1666666667rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-bottom: 1px solid @fs_dark_smcontain;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tool-list {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: 0;
  border: none;
  background: 0 0;
}

.tip_time {
  position: absolute;
  top: 6%;
  height: 30px;
  width: 120px;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  z-index: 1000;
  background-color: @bg_dark;
  color: @fs_dark_contain;
}

.tip_quick {
  position: absolute;
  top: 6%;
  right: 11%;
  height: 30px;
  width: 110px;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  z-index: 1000;
  background-color: @bg_dark;
  color: @fs_dark_contain;
}

.tip_interval {
  position: absolute;
  top: 6%;
  right: 3%;
  height: 30px;
  width: 210px;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  z-index: 1000;
  background-color: @bg_dark;
  color: @fs_dark_contain;
}

.tip_PromiseAll {
  position: absolute;
  top: 6%;
  right: 1%;
  height: 30px;
  width: 120px;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  z-index: 1000;
  background-color: @bg_dark;
  color: @fs_dark_contain;
}

i {
  font-size: 30px;
  width: 2rem;
  height: 2rem;
  cursor:pointer;
}

.btn .title {
  line-height: 1.5rem;
  margin-top: .5rem;
}

.arr_input {
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
}

.code {
  width: 94%;
  margin-left: 3%;
  border: 1px solid @fs_dark_smcontain;
  border-radius: 5px;
  color: @fs_light_smcontain;
  ;
}

.trun_btn {
  margin-top: 10px;
  margin-left: 5%;
}

.input_tip {
  font-size: 10px;
  margin-left: 10%;
  color: red;
}

.run_btn {
  margin-left: 10%;
}

.Output {
  width: 60%;
  margin-top: 10px;
  margin-left: 5%;
}
</style>